<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片懒加载</title>
	<style type="text/css">
		#lazyImgBox{
			border: solid 1px lightgray;
			min-height: 500px;
			width: 1000px;
			position: relative;
		}
		.lazyImg{
			display: block;
            width: 500px;
            height: 400px;
		}
	</style>
</head>
<body>
	<div id="lazyImgBox"></div>
	<script type="text/javascript">
		/**
		 * 生成图片
		 * @param  {[type]} ) {					})(   [description]
		 * @return {[type]}   [description]
		 */
		// var imgFunc = (function () {
		// 	var imgNode = document.createElement("img");
		// 	document.body.appendChild(imgNode);
		// 	return {
		// 		setSrc: function(src){
		// 			imgNode.src = src;
		// 		}
		// 	}
		// })();

		// var proxyImage = (function(){
		// 	var img = new Image();
		// 	img.onload = function(){
		// 		imgFunc.setSrc(this.src);
		// 	}
		// 	return {
		// 		setSrc: function(src){
		// 			imgFunc.setSrc('./wicked_wonderland.jpg');
		// 			img.src = src;
		// 		}
		// 	}
		// })();

		// proxyImage.setSrc('./1.jpg');
		// proxyImage.setSrc('./2.png');
		// proxyImage.setSrc('./3.jpg');
		// proxyImage.setSrc('./4.jpg');


		var imgSrcs = [
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			"https://gitee.com/oschina/bullshit-codes/raw/master/resource/bullshit.png",
			];

		function imgCreator(src){
			var imgNode = new Image();
			imgNode.data = src;
			imgNode.src = '';
			imgNode.className = 'lazyImg';
			// console.log(imgNode);
			document.getElementById('lazyImgBox').appendChild(imgNode);
		} 

		for (var i = 0; i < imgSrcs.length; i++) {
			imgCreator(imgSrcs[i]);
		}

		var index = 0;//图片加载到的位置
		var clientH = document.documentElement.clientHeight;
		var scrollT = 0;
		var imgs = document.querySelectorAll('img');

		console.log('clientH:',clientH);
		console.log('scrollT:',scrollT);

		//the keypoint
		window.onscroll = function(){	
			scrollT = document.body.scrollTop||document.documentElement.scrollTop;
			for (var i = index; i < imgs.length; i++) { 
				// console.log('img-',(i+1),':offsetTop = ',imgs[i].offsetTop);
				if(imgs[i].offsetTop<clientH+scrollT){
					// console.log('img-',(i+1),',set-src:',imgs[i].offsetTop);
					imgs[i].src = imgs[i].data;
					index = i+1;
					console.log('img location:',index);
				}
			}
		}
	</script>
</body>
</html>